<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>星巴克在中国</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="./css/animate.css">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/detail.css">
	<link rel="stylesheet" href="css/about.css">

</head>

<body>
<!-- 左侧导航栏 -->
	<div class="container-fluid">
		<div class="row justify-content-end">
			<div class="col-lg-4 position-fixed border-right leftCon">
				<!-- 导航栏 -->
				<header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
					<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
					<ul class="nav mr-auto">
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">门店</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
						</li>
						<li class="nav-item">
							<a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
						</li>
					</ul>
					<span class="iconfont icon-menu" id="showBtn"></span>
				</header>
				<!-- 展示 -->
				<div class="see">
					<p style="font-size: 32px;font-weight: bold;">关于星巴克</p>
					<div class="one"><a href="">星巴克在中国</a></div>
					<div class="one"><a  href="./work.html">工作机会</a></div>
					<div class="one"><a href="./company.html">企业新闻</a></div>
					<div class="one"><a href="">社会责任</a></div>
					<div class="one"><a href="">历史回顾</a></div>
					<div class="one"><a href="">联系我们</a></div>
				</div>
				<!-- 点击菜单后要展示的内容 -->
				<div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
					<header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
						<a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
						<span class="iconfont icon-guanbi" id="closeBtn"></span>
					</header>
					<div class="list">
						<ul class="list-unstyled mx-sm-5 pl-sm-5">
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
							<hr>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
							<li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
							<hr>
						</ul>	
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- 右侧主界面 -->
	<div class="about">
		<!-- 头部图片及文字 -->
		<div id="header">
			<section>
				<h1 class="china">星巴克在中国</h1>
				<p class="china" style="font-size: 18px;">
				我们希望通过每一杯咖啡，将星巴克的咖啡传承与独特的咖啡体验带给我们的顾客。
				</p>
			</section>
			<img src="./images/starbucks-in-china.jpg" alt="星巴克在中国">
	
		</div>	
	
		<!-- 历史、门店以及责任 -->
		<div id="content">
			<section>
				<ul class="biaoqian">
				<li>
					<a class="link" href="#" style="color: rgb(9, 134, 86);">历史</a>
					<div class="card">
					<div class="font">
						<div class="num">
						1999
						<div class="introduce">星巴克内地第一家门店</div>
						</div>
					</div>
						<div class="contents">
						<p>
							星巴克于1999年1月，在北京中国国际贸易中心开设中国内地第一家门店。
							对星巴克来说，中国目前已成为星巴克发展速度最快、最大的海外市场。
						</p>
						</div>
				</div>
				</li>
				<li>
				<a class="link" href="#" style="color: rgb(9, 134, 86);">门店</a>
				<div class="card">
					<div class="font">
					<div class="num">
						5,000
						<div class="introduce">家门店遍布中国内地200个城市</div>
					</div>
					</div>
					<div class="contents">
					<p>
						目前，星巴克已经在中国内地200个城市开设了5,000家门店，拥有近60,000名星巴克伙伴。这一独特优势使我们能够在每一天，通过每一家星巴克门店，践行我们的承诺。
					</p>
					</div>
				</div>
				</li>
				<li>
				<a class="link" href="#" style="color: rgb(9, 134, 86);">社会责任</a>
				<div class="card">
					<div class="font">
					<div class="num">
						1,100,000
						<div class="introduce">小时社区服务
						</div>
					</div>
					</div>
					<div class="contents">
					<p>
						进入中国以来，星巴克始终致力于回馈社会，持续在中国内地不同地区和城市开展企业社会责任项目，对于当地社会发展做出自己的一份贡献。自2011年起，星巴克中国的伙伴和志愿者们一共贡献了超过110万小时的社区服务，增进了与社区和顾客的情感联系。
					</p>
					</div>
				</div>
				</li>
			</ul>
			</section>
		</div>	
		<!-- 我们的使命与价值观 -->
		<section class="shiming">
			<section>
			<h2>我们的使命和价值观</h2>
			<div class="flex">
				<div class="value">
				<p>激发并孕育人文精神，每人，每杯，每个社区。</p>
				<p>以我们的伙伴、咖啡和顾客为核心，我们努力践行以下价值观：</p>
				<ul>
					<li>营造一种温暖而有归属感的文化，欣然接纳和欢迎每一个人。</li>
					<li>
					积极行动，勇于挑战现状，打破陈规，以创新方式实现公司与伙伴的共同成长。
					</li>
					<li>在每个连接彼此的当下，我们专注投入，开诚相见，互尊互敬。</li>
					<li>对于每件事，我们都竭尽所能，做到最好，敢于担当。</li>
				</ul>
				<button class="about-join-us"><a href="./work.html">加入我们</a></button>
				</div>
				<div>
				<img src="./images/starbucksinchina.jpg" alt="Starbucks China" />
				</div>
			</div>
			</section>
		</section>
		<!-- 最新新闻 -->
		<section class='zuixin'>
			<section class='news'>
			<h2>最新新闻</h2>
			<ul class='list'>
				<li id="good" class="pulse">
					<a href='./news.html' class='detail'>
					<img src="./images/2021-04-21-poster.jpg" alt="GOOD">
					<div class='left-c'>
						<h3>
						星巴克“GOODGOOD星善食<sup> TM</sup>
						主义”行动再升级<br>创新推出环保吸管、杯子和餐具 拓展更多植物膳食餐饮选择
						</h3>
						<p style="color: #212121;">
							全新启用“渣渣管”、店用冷饮杯和木制餐具，持续探索资源循环使用，不断升级绿色环保实践
							地球日为自带杯顾客免费提供20万杯燕麦拿铁，坚持以实际行动回馈顾客对地球的保护和关爱
							持续创新“GOODGOOD星善食 TM主义”植物膳食菜单，激励更多顾客共同探索有益环境的生活方式
							2021年4月21日 –“世界地球日”到来之际，星巴克“...</p>
					</div>
					</a>
				</li>
				
				<li id="yunnan" class="pulse">
					<a href='' class='detail'>
					<img src="./images/yunnan-proverty.jpg" alt="YUNNAN">
					<div class='left-c'>
						<h3>
						从产业精准扶贫到乡村振兴 智慧农业赋能咖啡种植社区<br>
						星巴克携手北京乐平公益基金会启动云南咖啡产业扶持三期项目
						</h3>
						<p style="color: #212121;">
						探索咖啡产业升级新路径，积极响应乡村振兴和农村现代化国家战略
						国内首个探索将智慧农业数字化科技应用于咖啡产业的公益项目，让咖啡“种出”大智慧
						一村一策精准施力，助推云南咖啡实现“好品质、好环境、好社区”愿景
						（2021年3月31日，云南普洱）星巴克“共享价值”咖啡产业扶持三期智慧农业项目今日正式启动。星巴克宣布捐赠180万美...</p>
					</div>
				</a>
		
				</li>
				
				<li id="health" class="pulse">
				<a href='' class='detail'>
					<img src="./images/health-china-img1.jpg" alt="HEALTH">
					<div class='left-c'>
					<h3>
						守护白衣天使 助力基层医护<br>
						星巴克携手中国宋庆龄基金会启动“助力基层防控新冠肺炎计划”
					</h3>
					<p style="color: #212121;">
						1月22日，北京  – 当前，新冠疫情的防疫已进入新常态新阶段，
						如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴克宣布与中国
						宋庆龄基金会共同启动“健康中国——星巴克助力基层防控新冠肺炎计划”，希望通过专业权威的呼吸疾病诊疗和防治培训，
						未雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣...</p>
					</div>
				</a>
				</li>
				<button class="all"><a href="./company.html">所有新闻</a></button>
			</ul>
			
			</section>
		</section>
		<!-- 关于我们 -->
		<section>
			<section class="us">
			  <div class="accordion" id="accordionExample">
				  <div class="card-us">
					<div class="card-header" id="headingOne">
					  <h2 class="mb-0">
						<h3  data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
						  背景
						  <span><img src="./images/箭头.png" alt="" class="jiantou"></span>
						  <p class="miaoshu">自1999年进入中国以来，秉承“激发并孕育人文精神——每人、每杯、每个社区”的公司使命，我们始终致</p>
						</h3>
					  </h2>
					</div>
				
					<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
					  <div class="card-body">
						  <p style="font-size: 17px; padding-top:0 ;">
							  自1999年进入中国以来，秉承“激发并孕育人文精神——每人、每杯、每个社区”的公司使命，我们始终致
							  力于发展成为一家与众不同的公司：在传承经典咖啡文化的同时，关爱我们的伙伴，
							  为顾客提供超越期望的星巴克体验，并为所在社区的繁荣做出自己的贡献。目前，星巴克已经在中国内地200个城市开设了5,000家门店，
							  拥有近60,000名星巴克伙伴。这一独特优势使我们能够在每一天，通过每一家星巴克门店，践行我们的承诺。</p>
					  </div>
					</div>
				  </div>
			  </div>
			  <div class="accordion" id="accordionExample2">
					<div class="card-us">
						<div class="card-header" id="headingOne2">
						  <h2 class="mb-0">
							<h3  data-toggle="collapse" data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
								高品质的星巴克咖啡
							  <span><img src="./images/箭头.png" alt="" class="jiantou"></span>
							  <p class="miaoshu">
								我们热爱我们的咖啡。我们相信通过一杯高品质的手工咖啡可以传递和分享真挚情感，
							  </p>
							</h3>
						  </h2>
						</div>
					
						<div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2" data-parent="#accordionExample2">
						  <div class="card-body">
							  <p style="font-size: 17px; padding-top:0 ;">
								我们热爱我们的咖啡。我们相信通过一杯高品质的手工咖啡可以传递和分享真挚情感，而这样简单的行为或许可以为顾客提供一些正能量。
								因此，星巴克始终致力于通过道德采购，烘焙并提供高品质的阿拉比卡咖啡豆。我们还在中国云南普洱建立了星巴克中国咖啡种植者支持中
								心，旨在整合和促进可持续种植规范在当地的推广，助力云南咖啡产业的发展。从一粒种子到一杯咖啡，每一个环节都倾入了星巴克的心意
								和努力，只为每一次光顾我们门店的顾客可以享受醇香的浓缩咖啡及其钟爱的咖啡饮品。
							</p>
						  </div>
						</div>
					</div>
			    </div>
				  
					  <div class="accordion" id="accordionExample3">
						  <div class="card-us">
							<div class="card-header" id="headingOne3">
							  <h2 class="mb-0">
								<h3  data-toggle="collapse" data-target="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
									独一无二的星巴克体验
								  <span><img src="./images/箭头.png" alt="" class="jiantou"></span>
								  <p class="miaoshu">
									我们热爱我们的顾客。星巴克一直致力于为顾客提供始终如一的优质星巴克体验。
									</p>
								</h3>
							  </h2>
							</div>
						
							<div id="collapseOne3" class="collapse show" aria-labelledby="headingOne3" data-parent="#accordionExample3">
							  <div class="card-body">
								  <p style="font-size: 17px; padding-top:0 ;">
									我们热爱我们的顾客。星巴克一直致力于为顾客提供始终如一的优质星巴克体验。同时，
									在对产品质量和服务精益求精的基础上，星巴克强调创新，强调产品和服务的个性化，强调不断给顾客带来愉悦和惊喜。
									星巴克也充分尊重中国历史悠久的传统文化，在门店设计、地方食品和饮料供应等方面，完美地将当地习俗融合到星巴克体验之中。
									目前，我们在中国开设了7家向我们的咖啡传承致敬的旗舰店，它们分别位于北京嘉里中心、北京太古里、成都太古里、上海迪士尼
									度假区、深圳万象天地、苏州中心和北京坊。独特的星巴克数字平台，包括星巴克移动应用软件和星享俱乐部，帮助我们在门店以外
									建立与顾客的连接。星巴克始终致力于通过不断创新，建立我们和顾客之间的情感连接，同时激发他们在店内店外与更多人分享这些
									美好瞬间。2015年12月，星巴克推出天猫官方旗舰店，将独特的门店体验与线上“第四空间”体验紧密对接，这是星巴克第一个“互联网+咖啡"的
									心意传递平台。2016年12月，星巴克宣布与腾讯达成战略合作，在中国领先的移动社交应用――微信上推出创新的社交礼品体验“用星说”，借此鼓励
									和激发数字时代的情感连接。此外，为了进一步满足中国消费者多样化的支付需求，星巴克中国门店已全面接入微信和支付宝。2018年8月，星巴克
									宣布与阿里巴巴集团达成新零售全面战略合作，通过一系列基于新零售的探索创新给中国的消费者带来更多惊喜。9月，星巴克官方线上订餐平台专星送T
									正式上线，通过星巴克APP和饿了么两大平台为顾客带来"用心，更多一度”的星巴克外送体验。2019年5月，星巴克"在线点，到店取"服务――“啡快Starbucks
									Now”上线，通过星巴克APP为星享俱乐部会员提供高效便捷、选择多样的星巴克体验。</p>
							  </div>
							</div>
						  </div>
						</div>
			</section>
		  </section>
	</div>  

<!-- 左侧导航栏 -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
			integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
			crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
			integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
			crossorigin="anonymous"></script>
	<script>
		$('#showBtn').on('click',function(){
			$('.menu').removeClass('hide').addClass('show');
			shadowMenu();
		});
		$('#closeBtn').on('click',function(){
			$('.menu').removeClass('show').addClass('hide');
			shadowMenu();
		});
	</script>
</body>

</html>